<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <el-row>
                <el-form inline="true" style="margin-top: 20px;">
                    <el-form-item label="选择时间:">
                        <el-date-picker v-model="times" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input v-model="phone" class="search-input" clearable placeholder="请输入电话号码"
                            style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select class="w300" clearable v-model="state" filterable placeholder="请选择">
                            <el-option v-for="item in states" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="search-btn" @click="getVisitorData">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table :data="visitorList" border tooltip-effect="dark" style="width: 100%;">
                <el-table-column label="编号" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.visitorDataId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime" align="center" label="提交时间"></el-table-column>
                <el-table-column align="center" label="电话号码" prop="phone"></el-table-column>
                <el-table-column prop="state" align="center" label="状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.state == 0 ? "未联系" : "已经联系" }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.state == 0" class="el-button checkCard el-button--text el-button--medium"
                            style="color: rgb(81, 205, 203);" @click="updateStateVisitor(scope.row)">确认联系</el-button>
                        <span v-else>已联系</span>
                    </template>
                </el-table-column>
                <el-table-column prop="modifierUser" align="center" label="操作人"></el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getVisitorData, updateStateVisitor } from '@/api/api.js';
import { str2time, getLocalStorage } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            total: 0,
            pageNum: 1,
            times: ['', ''],
            state: '',
            phone: '',
            states: [{ id: 0, name: "未联系" }, { id: 1, name: "已经联系" }],
            visitorList: [],
        };
    },
    mounted() {
        this.getVisitorData()
    },
    methods: {
        updateStateVisitor(row) {
            let params = row;
            params.state = 1;
            const user = getLocalStorage("user");
            if (user) {
                const userInfo = JSON.parse(user);
                console.log(userInfo)
                row.adminId = userInfo.adminId;
            }
            updateStateVisitor(params).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'sussess'
                    });
                    setTimeout(() => {
                        this.getVisitorData();
                    }, 200)
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },
        getVisitorData() {
            if (serverUrl.baseURL.indexOf("/test/") != -1) {
                //this.visitorList = this.visitorListTemp;
            } else {
                let params = {
                    pageNum: this.pageNum,
                    state: this.state,
                    phone: this.phone,
                    startTime: this.times && this.times[0] != "" ? str2time(this.times[0]) : '',
                    endTime: this.times && this.times[1] != "" ? str2time(this.times[1]) : ''
                }
                getVisitorData(params).then(res => {
                    if (res.code == 200) {
                        this.total = res.data.pageInfo.total;
                        this.visitorList = res.data.pageInfo.list;
                    } else {
                        this.visitorList = [];
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                    this.visitorList = [];
                })
            }
        },
        handleCurrentChange() {
            this.getVisitorData()
        },
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 160px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .operations {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns {
                display: flex;
                div {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
        }
    }
    .customer-manage-dialog {
        .el-dialog {
            width: 450px;
            .el-dialog__header {
                text-align: center;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .w240 {
                width: 240px;
            }
        }
    }
}
</style>
